<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thmeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <form action="/">
    <table border="1">
      <h1>停车车辆管理系统</h1>
      <select name="regionId">
        <option value="">---请选择---</option>
      </select>
      <input value="查询" type="submit" />
      <input value="添加" type="button" th:onclick="javascript:location.href='/add';" />
      <tr>
        <td>车牌号</td>
        <td>型号</td>
        <td>车库分区</td>
        <td>停车日期</td>
        <td>停车状态</td>
        <td>操作</td>
      </tr>
      <tr th:each="p:${pack}">
        <td th:text="${p.carNum}"></td>
        <td th:text="${p.brand}"></td>
        <td th:text="${p.regionName}"></td>
        <td th:text="${#dates.format(p.addTime,'yyyy-MM-dd')}"></td>
        <td th:style="'color:'+${p.status==0?'red':'black'}" th:text="${p.status}==0?'停车中':'已驶离'"></td>
        <td th:if="${p.status==0}"><a href="javascript:;" th:onclick="update(this,[[${p.id}]])">驶离</a></td>
        <td th:if="${p.status==1}">已驶离</td>
      </tr>
    </table>
  </form>

<script src="webjars/jquery/3.5.1/jquery.js"></script>
<script th:inline="javascript">
  function selectType() {
    let id=[[${regionId}]]
    $.getJSON("/type",function (data) {
      for (let i = 0; i < data.length; i++) {
        if (id === data[i].id) {
          $("[name=regionId]").append("<option selected value='"+data[i].id+"'>"+data[i].name+"</option>")
        } else {
          $("[name=regionId]").append("<option value='"+data[i].id+"'>"+data[i].name+"</option>")
        }
      }
    })
  }
  selectType()

  function update(obj,id) {
    if (confirm("请确认该汽车是否驶离？")){
      $.getJSON("/update/"+id,function (data) {
        if (data>0){
          $(obj).parent().prev().text("已驶离");
          $(obj).parent().prev().css("color","black");
          $(obj).css("color","black");
          $(obj).text("已驶离");
        }
      })
    }
  }

</script>
</body>
</html>